<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件审批</el-breadcrumb-item>
      <el-breadcrumb-item>文件存档</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="always">
      <el-input
        placeholder="请输入审批文档名称(模糊查询)"
        v-model="filename"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="serch"
        ></el-button>
      </el-input>
      <el-table
      class="eltable"
        :data="
          filelist1.slice(
            (pageData.pageNum - 1) * pageData.pageSize,
            pageData.pageNum * pageData.pageSize
          )
        "
        border
      >
        <el-table-column label="文件名" prop="fileName"></el-table-column>
        <el-table-column label="发起方式" prop="mode"></el-table-column>
        <el-table-column label="发起公司" prop="companyName"></el-table-column>
        <el-table-column
          label="发起个人"
          prop="applicantName"
        ></el-table-column>
        <el-table-column label="签署状态" prop="signStatus"></el-table-column>
        <el-table-column
          label="存档时间"
          prop="installDate"
          :formatter="formatDate"
        ></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope" >
            <el-button size="small" type="text" @click="tofile(scope.row)">
                        <a>文件详情</a>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.pageNum"
          :page-sizes="[10,20, 25, 30]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getfile } from '@/http/api';
export default {
  data() {
    return {
      filename:'',
      filelist1: [],
      pageData: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dialogVisible: false,
    };
  },
  created() {
    this.getfilelist1();
  },
  methods: {
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageData.pageSize = val;
        this.pageData.pageNum= 1
        this.getfilelist1()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageData.pageNum = val;
      },
      //时间格式化
      formatDate(row, column, cellValue, index) {
      let format = "YYYY-mm-dd HH:MM:SS";
      let date = new Date(cellValue);
      const dataItem = {
        "Y+": date.getFullYear().toString(),
        "m+": (date.getMonth() + 1).toString(),
        "d+": date.getDate().toString(),
        "H+": date.getHours().toString(),
        "M+": date.getMinutes().toString(),
        "S+": date.getSeconds().toString(),
      };
      Object.keys(dataItem).forEach((item) => {
        const ret = new RegExp(`(${item})`).exec(format);
        if (ret) {
          format = format.replace(
            ret[1],
            ret[1].length === 1
              ? dataItem[item]
              : dataItem[item].padStart(ret[1].length, "0")
          );
        }
      });
      return format;
    },
    serch(){
      const data={
        controllerId:localStorage.getItem('controllerId'),
        fileName: this.filename,
      }
      getfile(data).then(res=>{
        console.log(res)
        this.filelist1=res.data.reverse()
        this.total=res.data.length
      })
    },
    
  },
};
</script>

<style lang="less" scoped>
.eltable{
  margin-top: 20px;
}
</style>